<template>
    <div :class="`self-pick-up-info ${mode}`">
        <div class="info-item">
            <div class="item-name title-color">自提点</div>
            <div class="item-value">{{name}}</div>
        </div>
        <div class="info-item">
            <div class="item-name title-color">提货地址</div>
            <div class="item-value">{{info.address}}</div>
        </div>
        <div class="info-item">
            <div class="item-name title-color">提货时间</div>
            <div class="item-value">{{bookTimeValue}}（请于 {{info.deadline}} 前到店）</div>
        </div>
    </div>
</template>

<script>
import { formatDate } from '@common/format';
import ModeMixin from '@common/mixin';
export default {
    name: 'SelfPickUpInfo', // 自提信息
    mixins: [ModeMixin],
    props: {
        info: {
            type: Object,
            default: () => {},
        },
        name: {
            type: String,
            defaulat: '',
        },
        bookTime: {
            type: String,
            default: '',
        },
    },
    computed: {
        bookTimeValue() {
            return formatDate(this.$props.bookTime, 'YYYY年MM月DD日');
        },
    },
};
</script>

<style lang="less">
.self-pick-up-info {
    .mode-white();
    .m-h(@gap-md);
    .p(@gap-md);
    .m-t(@gap-md);
    border-radius: @border-radius;
    .info-item {
        .m-b(@shop-gap * 3);
        &:last-child {
            .m-b(@shop-gap);
        }
        .item-name {
            font-size: @font-size-md;
            font-weight: 500;
            color: @text-color;
            height: 16px;
        }
        .item-value {
            font-size: @shop-font-size;
            color: @tip-color;
            .m-t(@shop-gap);
            height: 13px;
        }
    }
}
</style>
